<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>登录 - 现代账户访问</title>
    <!-- 引入 Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 Font Awesome 图标 -->
    <link
      href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
    />

    <!-- 配置 Tailwind -->
    <script>
      tailwind.config = {
        darkMode: "class",
        theme: {
          extend: {
            colors: {
              primary: "#165DFF",
              secondary: "#36CFC9",
              neutral: {
                50: "#F5F7FA",
                100: "#E4E6EB",
                200: "#C9CDD4",
                300: "#86909C",
                400: "#4E5969",
                500: "#272E3B",
                600: "#1D2129",
              },
            },
            fontFamily: {
              inter: ["Inter", "system-ui", "sans-serif"],
            },
            boxShadow: {
              auth: "0 10px 40px -10px rgba(0, 0, 0, 0.1)",
              "auth-dark": "0 10px 40px -10px rgba(0, 0, 0, 0.3)",
              btn: "0 4px 14px 0 rgba(22, 93, 255, 0.35)",
            },
          },
        },
      };
    </script>

    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
      @layer utilities {
        .content-auto {
          content-visibility: auto;
        }
        .text-gradient {
          background-clip: text;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
        .bg-blur {
          backdrop-filter: blur(8px);
        }
        .input-focus {
          @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
        }
        .btn-hover {
          @apply hover:-translate-y-0.5 active:translate-y-0 transition-all duration-300;
        }
      }
    </style>
  </head>

  <body
    class="font-inter bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-neutral-600 dark:to-neutral-700 min-h-screen flex items-center justify-center p-4 transition-colors duration-500"
  >
    <!-- 背景装饰元素 -->
    <div class="fixed inset-0 overflow-hidden -z-10">
      <div
        class="absolute -top-40 -right-40 w-80 h-80 bg-primary/10 dark:bg-primary/5 rounded-full blur-3xl"
      ></div>
      <div
        class="absolute -bottom-20 -left-20 w-60 h-60 bg-secondary/10 dark:bg-secondary/5 rounded-full blur-3xl"
      ></div>
    </div>

    <!-- 主容器 -->
    <div class="w-full max-w-6xl grid grid-cols-1 lg:grid-cols-5 gap-8">
      <!-- 左侧品牌/信息区域 - 仅在大屏幕显示 -->
      <div
        class="hidden lg:block lg:col-span-2 bg-white dark:bg-neutral-500 rounded-2xl shadow-auth dark:shadow-auth-dark p-8 md:p-12 flex flex-col justify-between relative overflow-hidden"
      >
        <!-- 背景图形装饰 -->
        <div
          class="absolute -top-10 -right-10 w-40 h-40 bg-primary/5 dark:bg-primary/10 rounded-full"
        ></div>
        <div
          class="absolute -bottom-10 -left-10 w-40 h-40 bg-secondary/5 dark:bg-secondary/10 rounded-full"
        ></div>

        <!-- 品牌标识 -->
        <div class="relative">
          <div class="flex items-center space-x-2 mb-2">
            <div
              class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center"
            >
              <i class="fa fa-shield text-white text-xl"></i>
            </div>
            <span
              class="text-2xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient"
              >SecureAuth</span
            >
          </div>
          <p class="text-neutral-400 dark:text-neutral-200 text-sm max-w-xs">
            安全、快速的身份验证解决方案，保护您的数字资产
          </p>
        </div>

        <!-- 主图形 -->
        <div class="my-8 relative">
          <img
            src="https://picsum.photos/id/325/600/400"
            alt="安全登录概念图"
            class="w-full h-auto rounded-xl shadow-lg"
          />
          <div
            class="absolute -bottom-4 -right-4 bg-white dark:bg-neutral-600 p-3 rounded-lg shadow-md max-w-[200px]"
          >
            <div class="flex items-center space-x-2 mb-1">
              <div class="w-2 h-2 rounded-full bg-green-500"></div>
              <span class="text-sm font-medium">多重身份验证</span>
            </div>
            <p class="text-xs text-neutral-400 dark:text-neutral-300">
              提供多层次安全保护，防止未授权访问
            </p>
          </div>
        </div>

        <!-- 特性列表 -->
        <div class="space-y-4 relative">
          <div class="flex items-start space-x-3">
            <div
              class="mt-1 w-6 h-6 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center flex-shrink-0"
            >
              <i class="fa fa-lock text-primary text-xs"></i>
            </div>
            <div>
              <h3 class="text-sm font-medium">银行级加密</h3>
              <p class="text-xs text-neutral-400 dark:text-neutral-300">
                所有数据传输均采用 AES-256 加密
              </p>
            </div>
          </div>

          <div class="flex items-start space-x-3">
            <div
              class="mt-1 w-6 h-6 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center flex-shrink-0"
            >
              <i class="fa fa-bolt text-primary text-xs"></i>
            </div>
            <div>
              <h3 class="text-sm font-medium">快速访问</h3>
              <p class="text-xs text-neutral-400 dark:text-neutral-300">
                记住设备，减少重复验证步骤
              </p>
            </div>
          </div>

          <div class="flex items-start space-x-3">
            <div
              class="mt-1 w-6 h-6 rounded-full bg-primary/10 dark:bg-primary/20 flex items-center justify-center flex-shrink-0"
            >
              <i class="fa fa-shield text-primary text-xs"></i>
            </div>
            <div>
              <h3 class="text-sm font-medium">实时保护</h3>
              <p class="text-xs text-neutral-400 dark:text-neutral-300">
                检测异常登录行为，及时发出警报
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧登录表单区域 -->
      <div
        class="lg:col-span-3 bg-white dark:bg-neutral-500 rounded-2xl shadow-auth dark:shadow-auth-dark p-6 md:p-8 lg:p-12 relative"
      >
        <!-- 顶部导航 -->
        <div class="flex justify-between items-center mb-8 lg:justify-end">
          <!-- 移动端品牌标识 -->
          <div class="flex items-center space-x-2 lg:hidden">
            <div
              class="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center"
            >
              <i class="fa fa-shield text-white text-sm"></i>
            </div>
            <span
              class="text-xl font-bold bg-gradient-to-r from-primary to-secondary text-gradient"
              >SecureAuth</span
            >
          </div>

          <!-- 暗黑模式切换 -->
          <button
            id="theme-toggle"
            class="w-10 h-10 rounded-full bg-neutral-100 dark:bg-neutral-600 flex items-center justify-center hover:bg-neutral-200 dark:hover:bg-neutral-700 transition-colors"
          >
            <i class="fa fa-sun-o dark:hidden text-yellow-500"></i>
            <i class="fa fa-moon-o hidden dark:block text-blue-300"></i>
          </button>
        </div>

        <!-- 登录表单标题 -->
        <div class="mb-8">
          <h1
            class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-neutral-600 dark:text-white mb-2"
          >
            欢迎回来
          </h1>
          <p class="text-neutral-400 dark:text-neutral-300">
            请输入您的账号信息登录系统
          </p>
        </div>

        <!-- 登录表单 -->
        <form id="login-form" class="space-y-5">
          <!-- 邮箱/用户名输入 -->
          <div>
            <label
              for="email"
              class="block text-sm font-medium text-neutral-500 dark:text-neutral-300 mb-1.5"
              >电子邮箱或用户名</label
            >
            <div class="relative">
              <div
                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
              >
                <i
                  class="fa fa-user text-neutral-300 dark:text-neutral-400"
                ></i>
              </div>
              <input
                type="text"
                id="email"
                class="w-full pl-10 pr-4 py-3 bg-neutral-50 dark:bg-neutral-600 border border-neutral-200 dark:border-neutral-700 rounded-xl input-focus transition-all duration-300"
                placeholder="请输入电子邮箱或用户名"
                required
              />
              <div
                class="hidden absolute inset-y-0 right-0 pr-3 flex items-center text-green-500"
                id="email-valid"
              >
                <i class="fa fa-check-circle"></i>
              </div>
            </div>
            <p class="text-red-500 text-xs mt-1.5 hidden" id="email-error">
              请输入有效的电子邮箱或用户名
            </p>
          </div>

          <!-- 密码输入 -->
          <div>
            <div class="flex justify-between items-center mb-1.5">
              <label
                for="password"
                class="block text-sm font-medium text-neutral-500 dark:text-neutral-300"
                >密码</label
              >
              <a
                href="#"
                class="text-xs text-primary hover:text-primary/80 transition-colors"
                >忘记密码?</a
              >
            </div>
            <div class="relative">
              <div
                class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"
              >
                <i
                  class="fa fa-lock text-neutral-300 dark:text-neutral-400"
                ></i>
              </div>
              <input
                type="password"
                id="password"
                class="w-full pl-10 pr-10 py-3 bg-neutral-50 dark:bg-neutral-600 border border-neutral-200 dark:border-neutral-700 rounded-xl input-focus transition-all duration-300"
                placeholder="请输入密码"
                required
              />
              <button
                type="button"
                id="toggle-password"
                class="absolute inset-y-0 right-0 pr-3 flex items-center text-neutral-300 dark:text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-200 transition-colors"
              >
                <i class="fa fa-eye-slash" id="password-icon"></i>
              </button>
            </div>
            <p class="text-red-500 text-xs mt-1.5 hidden" id="password-error">
              密码长度至少为 6 个字符
            </p>
          </div>

          <!-- 记住我和登录按钮 -->
          <div class="pt-2">
            <div class="flex items-center justify-between mb-6">
              <div class="flex items-center">
                <input
                  type="checkbox"
                  id="remember"
                  class="w-4 h-4 rounded border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-600 text-primary focus:ring-primary/30 transition-colors"
                />
                <label
                  for="remember"
                  class="ml-2 text-sm text-neutral-500 dark:text-neutral-300"
                  >记住我 30 天</label
                >
              </div>
            </div>

            <button
              type="submit"
              id="login-btn"
              class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 px-4 rounded-xl shadow-btn btn-hover focus:outline-none focus:ring-2 focus:ring-primary/50"
            >
              <span>登录账户</span>
              <i class="fa fa-arrow-right ml-2"></i>
            </button>
          </div>

          <!-- 分隔线 -->
          <div class="relative flex items-center py-2">
            <div
              class="flex-grow border-t border-neutral-200 dark:border-neutral-700"
            ></div>
            <span
              class="flex-shrink mx-4 text-xs text-neutral-400 dark:text-neutral-500"
              >或使用以下方式登录</span
            >
            <div
              class="flex-grow border-t border-neutral-200 dark:border-neutral-700"
            ></div>
          </div>

          <!-- 社交登录选项 -->
          <div class="grid grid-cols-3 gap-3">
            <button
              type="button"
              class="flex items-center justify-center space-x-2 py-2.5 bg-white dark:bg-neutral-600 border border-neutral-200 dark:border-neutral-700 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
            >
              <i class="fa fa-google text-[#DB4437]"></i>
              <span class="text-sm">谷歌</span>
            </button>

            <button
              type="button"
              class="flex items-center justify-center space-x-2 py-2.5 bg-white dark:bg-neutral-600 border border-neutral-200 dark:border-neutral-700 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
            >
              <i class="fa fa-facebook text-[#4267B2]"></i>
              <span class="text-sm">脸书</span>
            </button>

            <button
              type="button"
              class="flex items-center justify-center space-x-2 py-2.5 bg-white dark:bg-neutral-600 border border-neutral-200 dark:border-neutral-700 rounded-xl hover:bg-neutral-50 dark:hover:bg-neutral-700 transition-colors"
            >
              <i class="fa fa-weixin text-[#07C160]"></i>
              <span class="text-sm">微信</span>
            </button>
          </div>
        </form>

        <!-- 注册提示 -->
        <div class="mt-8 text-center">
          <p class="text-sm text-neutral-500 dark:text-neutral-300">
            还没有账号?
            <a
              href="#"
              class="font-medium text-primary hover:text-primary/80 transition-colors"
              >立即注册</a
            >
          </p>
        </div>
      </div>
    </div>

    <!-- 登录成功提示 (默认隐藏) -->
    <div
      id="success-toast"
      class="fixed top-6 right-6 bg-white dark:bg-neutral-500 shadow-lg rounded-lg p-4 max-w-xs transform translate-x-full opacity-0 transition-all duration-500 z-50"
    >
      <div class="flex items-start space-x-3">
        <div
          class="mt-0.5 w-6 h-6 rounded-full bg-green-100 dark:bg-green-900/30 flex items-center justify-center flex-shrink-0"
        >
          <i class="fa fa-check text-green-500 dark:text-green-400 text-xs"></i>
        </div>
        <div>
          <h3 class="text-sm font-medium text-neutral-600 dark:text-white">
            登录成功
          </h3>
          <p class="text-xs text-neutral-400 dark:text-neutral-300 mt-0.5">
            正在为您跳转至主页...
          </p>
        </div>
        <button
          id="close-toast"
          class="text-neutral-300 hover:text-neutral-500 dark:hover:text-neutral-200"
        >
          <i class="fa fa-times"></i>
        </button>
      </div>
    </div>

    <script>
      // 暗黑模式切换功能
      const html = document.documentElement;
      const themeToggle = document.getElementById("theme-toggle");

      // 检查用户偏好或本地存储的主题设置
      function checkThemePreference() {
        const savedTheme = localStorage.getItem("darkMode");
        if (savedTheme !== null) {
          return savedTheme === "true";
        }
        // 默认为跟随系统设置
        return window.matchMedia("(prefers-color-scheme: dark)").matches;
      }

      // 应用主题设置
      function applyTheme(isDark) {
        if (isDark) {
          html.classList.add("dark");
        } else {
          html.classList.remove("dark");
        }
        localStorage.setItem("darkMode", isDark);
      }

      // 初始化主题
      applyTheme(checkThemePreference());

      // 绑定主题切换事件
      themeToggle.addEventListener("click", () => {
        const isDark = html.classList.toggle("dark");
        applyTheme(isDark);
      });

      // 密码显示/隐藏切换
      const passwordInput = document.getElementById("password");
      const togglePassword = document.getElementById("toggle-password");
      const passwordIcon = document.getElementById("password-icon");

      togglePassword.addEventListener("click", () => {
        const type =
          passwordInput.getAttribute("type") === "password"
            ? "text"
            : "password";
        passwordInput.setAttribute("type", type);

        // 切换图标
        if (type === "password") {
          passwordIcon.classList.remove("fa-eye");
          passwordIcon.classList.add("fa-eye-slash");
        } else {
          passwordIcon.classList.remove("fa-eye-slash");
          passwordIcon.classList.add("fa-eye");
        }
      });

      // 表单验证
      const loginForm = document.getElementById("login-form");
      const emailInput = document.getElementById("email");
      const emailError = document.getElementById("email-error");
      const emailValid = document.getElementById("email-valid");
      const passwordError = document.getElementById("password-error");
      const successToast = document.getElementById("success-toast");
      const closeToast = document.getElementById("close-toast");

      // 邮箱验证
      emailInput.addEventListener("input", () => {
        const value = emailInput.value.trim();
        // 简单验证：允许邮箱格式或至少3个字符的用户名
        const isValid = value.includes("@")
          ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)
          : value.length >= 3;

        if (isValid) {
          emailInput.classList.remove("border-red-500");
          emailInput.classList.add("border-green-500");
          emailError.classList.add("hidden");
          emailValid.classList.remove("hidden");
        } else {
          emailInput.classList.remove("border-green-500");
          emailInput.classList.add("border-red-500");
          emailError.classList.remove("hidden");
          emailValid.classList.add("hidden");
        }
      });

      // 密码验证
      passwordInput.addEventListener("input", () => {
        if (passwordInput.value.length >= 6) {
          passwordInput.classList.remove("border-red-500");
          passwordInput.classList.add("border-green-500");
          passwordError.classList.add("hidden");
        } else {
          passwordInput.classList.remove("border-green-500");
          passwordInput.classList.add("border-red-500");
          passwordError.classList.remove("hidden");
        }
      });

      // 表单提交处理
      loginForm.addEventListener("submit", (e) => {
        e.preventDefault();
        let isValid = true;

        // 验证邮箱
        const emailValue = emailInput.value.trim();
        const isEmailValid = emailValue.includes("@")
          ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)
          : emailValue.length >= 3;

        if (!isEmailValid) {
          emailInput.classList.add("border-red-500");
          emailError.classList.remove("hidden");
          isValid = false;
        }

        // 验证密码
        if (passwordInput.value.length < 6) {
          passwordInput.classList.add("border-red-500");
          passwordError.classList.remove("hidden");
          isValid = false;
        }

        // 如果验证通过，显示成功提示
        if (isValid) {
          // 模拟登录加载状态
          const loginBtn = document.getElementById("login-btn");
          const originalText = loginBtn.innerHTML;
          loginBtn.disabled = true;
          loginBtn.innerHTML =
            '<i class="fa fa-spinner fa-spin mr-2"></i>登录中...';

          // 模拟API请求延迟
          setTimeout(() => {
            loginBtn.disabled = false;
            loginBtn.innerHTML = originalText;

            // 显示成功提示
            successToast.classList.remove("translate-x-full", "opacity-0");

            // 3秒后隐藏提示
            const toastTimeout = setTimeout(() => {
              successToast.classList.add("translate-x-full", "opacity-0");
            }, 3000);

            // 手动关闭提示
            closeToast.addEventListener("click", () => {
              successToast.classList.add("translate-x-full", "opacity-0");
              clearTimeout(toastTimeout);
            });
          }, 1500);
        }
      });
    </script>
  </body>
</html>
